<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>CustomWelcome</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="index" class="big_box">
    <h1 class="tittle">欢迎使用{{ sys_name }}学生信息管理系统</h1>
    <div class="login_box">
        <h2>登录</h2>
        <el-form :label-position="labelPosition" :model="login_form" status-icon class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input v-model.number="login_form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="login_form.password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
    </div>

    <el-row>
        <el-button type="primary" round style="width: 14%" @click="gosystem">登录</el-button>
        <el-button type="primary" round style="width: 14%" @click="goregister">注册</el-button>
    </el-row>
</div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#index',
        data: function() {
            return {
                sys_name:"",
                yzm:"",
                result_yzm_code:"",
                result_yzm_url:"",
                login_form:{
                    username:"",
                    password:""
                },
                labelPosition:"left"
            }

        },
        methods: {
            gosystem(){
                if (this.login_form.username === "" || this.login_form.password === "" || this.yzm === ""){
                    this.$message.error("请检查输入的信息！！");
                }else {
                    const params = new URLSearchParams();
                    params.append('username', this.login_form.username);
                    params.append('password', this.login_form.password);
                    fetch('http://localhost:8080/Spring_MVC_class9_war_exploded/requestyzm?result_code=' + this.yzm, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        }
                    })
                        .then(response => {
                            if (response.ok) {
                                return response.text(); // 或者 response.json() 如果响应是JSON格式
                            }
                            throw new Error('Network response was not ok.');
                        })
                        .then(data => {
                            if (data === "1"){
                                // 发送POST请求
                                fetch('http://localhost:8080/Spring_MVC_class9_war_exploded/loginUser', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                                    },
                                    body: params // URLSearchParams对象会自动转换为URL编码的字符串
                                })
                                    .then(response => {
                                        if (response.ok) {
                                            return response.text(); // 或者 response.json() 如果响应是JSON格式
                                        }
                                        throw new Error('Network response was not ok.');
                                    })
                                    .then(data => {
                                        console.log(data)
                                        if (data === "1"){
                                            this.$message.success("登录成功！");
                                            setTimeout(() => {
                                                window.location.href = 'http://localhost:8080/Spring_MVC_class9_war_exploded/customIndex';
                                            }, 300); // 1000毫秒等于1秒
                                        }else {
                                            this.$message.error("账号或密码错误！！");
                                            setTimeout(() => {
                                                window.location.href = 'http://localhost:8080/Spring_MVC_class9_war_exploded/';
                                            }, 300); // 1000毫秒等于1秒
                                        }
                                    })
                                    .catch(error => {
                                        console.error('Error:', error);
                                        this.$message.error("注册失败！");
                                    });
                            }else{
                                this.$message.error("验证码错误，请重试！");
                                // 跳转到指定的URL
                                // 设置延迟1秒后跳转
                                setTimeout(() => {
                                    window.location.href = 'http://localhost:8080/Spring_MVC_class9_war_exploded/';
                                }, 300); // 1000毫秒等于1秒
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error("错误！");
                        });
                }

            },
            get_yzm(){
                fetch('http://localhost:8080/Spring_MVC_class9_war_exploded/getyzm', {
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok ' + response.statusText);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log(data)
                        this.result_yzm_code = data.msgcode;
                        this.result_yzm_url = "http://localhost:8080/Spring_MVC_class9_war_exploded/" + data.msgurl;
                        console.log(this.result_yzm_url)
                    })
                    .catch(error => {
                        console.error('There has been a problem with your fetch operation:', error);
                    });
            },
            goregister(){
                setTimeout(() => {
                    window.location.href = 'http://localhost:8080/Spring_MVC_class9_war_exploded/register';
                }, 300); // 1000毫秒等于1秒
            }
        },
        created() {
            this.get_yzm();
        }
    })
</script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        background-color: wheat;
    }
    .big_box{
        width: 100%;
        text-align: center;
        margin: 0 auto;
        border-radius: 5px;
    }
    .tittle{
        margin-top: 60px;
        font-size: 55px;
        color: white;
        margin-bottom: 130px;
    }
    .yzm_img{
        width: 180px;
        height: 50px;
        display: inline-block;
        flex: 1;
    }
    .login_box{
        width: 25%;
        background-color: #ffffff;
        text-align: center;
        margin: 0 auto;
        padding: 20px;
        margin-bottom: 25px;
    }

</style>
</html>
